<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统管理员</title>
		<title>给用户分配班级</title>
		<link rel="stylesheet" type="text/css" href="css/qingjia.css">
		<link rel="stylesheet" type="text/css" href="css/admin.css">
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
	<!--http://localhost:8080/kaoqin/teacher/findStudentOrTeacherByNotClass?id=20030-->
		
		<div id="container">
			<div id="menu">
				
				<div class="menu-level-0">给用户分配角色</div>
				<div class="menu-level-1"><a href="admin-yifenpeijuese.html">已分配角色的用户</a></div>
				<div class="menu-level-1"><a href="admin.html">给用户分配班级</a></div>
				<div class="menu-level-1"><a href="admin-yifenpeijuese.html">已分配班级的用户</a></div>
				<div class="menu-level-1"><a href="admin.html">给班级分配老师</a></div>
				<div class="menu-level-1"><a href="admin-yifenpeijuese.html">已分配老师的班级</a></div>
			</div>
			
			<div id="qingjia">
				
				<div id="qingjia-left">
					<!-- qingjia-left -->
				</div>
				<div id="qingjia-right">
					<!-- qingjia-right -->
					<div id="qingjia-right-top">
						<!-- qingjia-right-top -->
						
						<div id="qingjia-right-top-top">
							待分配班级的老师列表
						</div>
						<div id="qingjia-right-top-bottom">
							
							<table class="fenpeijuese" id="biao">
								<tr>
									<td>USER_ID</td>
									<td>姓名</td>
									<td>手机号码</td>
									<td>可分配的班级</td>
									<td>操作</td>
								</tr>
								<div>
									<tr v-for="teacher in teacherList">
										<td>{{teacher.id}}</td>
										<td>{{teacher.name}}</td>
										<td>{{teacher.phone}}</td>
										<td>
											<select class="class-select" @change="post2($event)">
												<option>选择班级</option>
												<option v-bind:id="clazz.id" :value="clazz.id" v-for="clazz in classres">{{clazz.name}}</option>
												<!-- <option :id="class.id" v-for="class in classList">{{class.name}}</option> -->
												<!-- <option :classId="300010">前端班</option>
												<option :classId="300020">后端班</option>
												<option :classId="300030">测试班</option> -->
											</select>
										</td>
										<td>
											
											<input class="fenpei" v-on:click="post2(teacher.id)" type="button" value="分配班级" />
										</td>
										</tr>
										
									</tr>
								</div>
							</table>
						</div>
						
					</div>
					
				</div>
				
			</div>
		</div>
	</body>
	<script>
	window.onload = function(){
		
		var table = new Vue({
			el:'#biao',
			data:{
				biao:[],
				teacherList:[],
				// changeText:'',
				// classList:{},
				classres:[]
			},
				methods:{
					post:function(){
						var url='http://localhost:8080/kaoqin/teacher/findStudentOrTeacherByNotClass?id=20030';
						this.$http.get(url).then(function(backdatas){
							console.log(backdatas);
							var code = backdatas.body.code;
							var dataR = backdatas.body.data;
							table.teacherList=dataR;	
						});
					
					},
					post2:function(id){
							var userId=id
							var id=this.classres
							var clazzId=parseInt(id);
							var datas=
							{"userId":userId,
							"clazzId":clazzId}
							var url = 'http://localhost:8080/kaoqin/teacher/addClazzByTeacherId';
							axios.post(url,datas).then(function(backdatas){
								location.reload();
							})
					      // this.$http.post(url, datas, {
					      //  emulateJSON: false
					      // }).then(function(backdatas) {
					      //  if (backdatas.body.code == 400) {
					      //   alert('增加失败!角色已存在');
					      //  } else {
					      //   alert('添加成功');
					      //   location.reload();
					      //  }
					      // });
					},
					
					post3:function(){
						var url='http://localhost:8080/kaoqin/teacher/findAllClazz';
						this.$http.get(url).then(function(backdatas){
							console.log(backdatas);
							var code = backdatas.body.code;
							table.classres = backdatas.body.data;
						});
					
					},
								
			},
		});
		table.post();
		// table.post2();
		table.post3();
	}
	</script>
</html>
